<style lang="scss" scoped="">
	@import '../style.scss';


</style>
<template>
	<div class='my_card_outer' style="height:10vh">
		<div class='my_card' style="height:49vh;">
			<div class="my_card_title">
				<Icon type="md-stats" color='rgb(67,158,279)' class="my_card_icon" />租户健康度详情
			</div>
			<div style="height:45vh" ref="myEchart">

			</div>
		</div>

	</div>

</template>

<script>
	import echarts from 'echarts'
	import config from '../config.js'
	export default {
		name: 'tenant_detail_dim',
		data() {
			return {
				data: 0
			}

		},
		watch: {
			test: function(val, oldVal) {
				// console.log('new: %s, old: %s', val, oldVal)
				this.initChart(val)
			}
		},
		computed: {
			test() {
				return this.$store.state.selected_tenant;
			}
		},
		mounted() {
			// this.initChart();
			// this.data=this.$store.state.data

			console.log('-----', this.$store.state.selected_tenant, this.data)
		},
		methods: {
			initChart(tenant_data) {
				let hv = document.body.clientHeight / 100;
				var myChart = echarts.init(this.$refs.myEchart);


				var option = getOption();
				option.series[0].data[0].value= [
					Math.round(tenant_data['util_dim_score']),
					Math.round(tenant_data['reason_dim_score']),
					Math.round(tenant_data['economy_dim_score']),
					Math.round(tenant_data['tech_dim_score']),
					Math.round(tenant_data['strategy_dim_score'])
				]
				myChart.setOption(option, true);
			}
		},

	}




	function getOption() {
		let hv = document.body.clientHeight / 100;
		var option = {

			legend: {
				left: 1 * hv,
				orient: 'vertical',
				textStyle: {
					color: '#FFF'
				},
				data: ['租户', '整体']
			},
			radar: {
				radius: '75%',
				startAngle: 145,
				name: {
					textStyle: {
						color: '#fff',
						borderRadius: 8,
						fontSize: hv * 1.5
					}
				},
				nameGap: 1 * hv,
				splitArea: {
					show: false
				},
				splitLine: {
					lineStyle: {
						color: [
							'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
							'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
							'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
						].reverse()
					}
				},
				splitArea: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(238, 197, 102, 0.5)'
					}
				},
				indicator: [{
						name: '资源利用',
						max: 100
					},
					{
						name: '资源分配',
						max: 100
					},
					{
						name: '经济产值',
						max: 100
					},
					{
						name: '科技产值',
						max: 100
					},
					{
						name: '战略意义',
						max: 100
					}
				]
			},
			series: [{
				name: '预算 vs 开销',
				type: 'radar',
				// areaStyle: {normal: {}},
				data: [{
						value: [67, 76, 54, 65, 76],
						name: '租户',
						itemStyle: {
							color: 'rgb(67,158,279)'
						}
					},
					{
						value: [76, 76, 54, 86, 76],
						itemStyle: {
							color: config.color[1]
						},
						name: '整体'
					}
				]
			}]
		};
		return option;
	}
</script>
